<template>
	<div class="app-container">
		<vxe-table border ref="xTable" show-overflow :data="infoList" :column-config="{ resizable: false }"
			:edit-config="{ trigger: 'click', mode: 'cell' }" @scroll="srcollFn" height="750px" width="1000px">
			<vxe-column field="contractCode" title="合同编号" width="120">
			</vxe-column>

			<vxe-column field="customName" title="公司名称" width="120"> </vxe-column>

			<vxe-column field="callName" title="姓名" width="120"> </vxe-column>
			<vxe-column field="callPhone" title="联系电话" width="100"> </vxe-column>
			<vxe-column field="createBy" title="所属销售" width="120"> </vxe-column>
			<vxe-column field="minTime" title="首款付款时间" width="120">
			</vxe-column>

			<vxe-column field="collectAmountTime" title="尾款付款时间" width="120">
			</vxe-column>
			<vxe-column field="daysDifference" title="付款周期/天" width="120">
			</vxe-column>
			<vxe-column field="gmtCreate" title="合同生成时间" width="120">
			</vxe-column>
			<vxe-column field="amountInfo" title="合同明细" width="120"> </vxe-column>
			<vxe-column field="contractAmount" title="合同总金额" width="120">
			</vxe-column>

			<vxe-column field="currentSalaryRatio" title="提成比例" :edit-render="{}" width="120">
				<template #edit="{ row }">
					<vxe-input v-model="row.currentSalaryRatio" type="text" placeholder="请输入提成比例"
						@blur="nameChangeEvent({ row })">
					</vxe-input>
				</template>
			</vxe-column>

			<vxe-column field="currentCost" title="成本" :edit-render="{}" width="120">
				<template #edit="{ row }">
					<vxe-input v-model="row.currentCost" type="text" placeholder="请输入成本"
						@blur="nameChangeEvent({ row })">
					</vxe-input>
				</template>
			</vxe-column>

			<vxe-column field="currentSalaryAmount" title="提成金额" width="120">
				<template #edit="{ row }">
					<vxe-input v-model="row.currentSalaryAmount" type="text" placeholder="请输入提成比例"
						@blur="nameChangeEvent({ row })">
					</vxe-input>
				</template>
			</vxe-column>
		</vxe-table>

		<vxe-table border ref="xTable" show-overflow :data="employees" :column-config="{ resizable: false }"
			:edit-config="{ trigger: 'click', mode: 'cell' }" @scroll="srcollFn">
			<vxe-column field="createBy" title="销售名称" width="120"> </vxe-column>

			<vxe-column field="contractAmount" title="(本月)提成合计" width="120">
			</vxe-column>
		</vxe-table>
	</div>
</template>

<script>
import { listInfo, loadImage } from "@/api/system/info";

import { updateRemark, listRemark } from "@/api/system/remark";
import { pcaTextArr } from "element-china-area-data";
import second from "@/components/Crontab/second.vue";
import { getToken } from "@/utils/auth";
import { listUser } from "@/api/system/user";

import { addTask } from "@/api/outsideTask/outSidetask";
import { addInsideTask, getTaskList } from "@/api/outsideTask/inSidetask";
import { listGroupSalary, listSalary, updateInfo } from "@/api/contract/info";

export default {
	name: "Info",
	dicts: ["status_custom", "contract_step_value", "contract_type"],
	data() {
		return {
			pcaTextArr,
			selectedOptions: [],
			remarkId: "",
			internalStaff: [],
			formRemark: {},
			openRecord: false,
			openContract: false,
			remarkList: [],
			checkList1: [],
			checkList2: [],
			checkList3: [],
			checkList4: [],
			checkList: [],
			statusList: [
				{
					label: "未成交",
					value: "0",
				},
				// { label: '已成交', value: '1' },
				// { label: '注册中', value: '2' },
				// { label: '完毕', value: '3' },
				{
					label: "废弃",
					value: "4",
				},
			],
			loading: true,

			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 客户信息表格数据
			infoList: [],
			employees: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			callPhone: "",
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 30,
				contractType: 2,
				contractStatus: 1,
				customName: null,
				legalName: null,
				customNumber: null,
				legalPersonNumber: null,
				source: null,
				province: null,
				city: null,
				region: null,
				adressDetail: null,
				bussLicenseImage: null,
				bussLicenseImageMinor: null,
				legalIdCardFront: null,
				legalIdCardBack: null,
				callPhone: null,
				callName: null,
				customManager: null,
				gmtCreate: null,
				successTime: null,
				status: 0,
				degree: null,
			},
			// 表单参数
			form: {
				groupDate: [],
				currentCost: null,
				contractAmount: 0,
				secondAmount: null,
				contractType: 0,
				regionArea: null,
				regionAreaArry: [],
				bussionRegister: null,
				bussionRegisterVo: [],
				registerAllAmount: null,
				registerAllNotes: null,
				registerWorker: null,
				registerBankOpen: null,
				bussionEntrust: null,
				bussionEntrustVo: [],
				entrustIndividualAmount: null,
				entrustIndividualNotes: null,
				entrustVerificationAmount: null,
				entrustVerificationNotes: null,
				entrustSmallAmount: null,
				entrustSmallNotes: null,
				entrustGeneralAmount: null,
				entrustGeneralNotes: null,
				entrustInvoiceAmount: null,
				entrustInvoiceNotes: null,
				entrustSocialAmount: null,
				entrustSocialNotes: null,
				entrustAccumulationAmount: null,
				entrustAccumulationNotes: null,
				entrustAddressAmount: null,
				entrustAddressNotes: null,
				entrustCycleStrat: null,
				entrustCycleEnd: null,
				bussionChange: null,
				bussionChangeVo: [],
				changeAmount: null,
				changeNotes: null,
				changeOtherNotes: null,
				bussionCancel: null,
				bussionCancelVo: [],
				cancelAmount: null,
				cancelNotes: null,
				cancelOtherNotes: null,
				bussionClientele: null,
				bussionClienteleVo: [],
				clienteleAmount: null,
				clienteleNotes: null,
				clienteleOtherNotes: null,
				contractRenewAmount: null,
				contractNotes: null,
				contractPhase: null,
			},
			queryEmp: {
				pageNum: 1,
				pageSize: 30,
				deptId: 200,
			},
			dateRange: [],
			breadList: [], //初始化
			// 表单校验
			rules: {},
			rowId: "",

			uploadImgUrl:
				process.env.VUE_APP_BASE_API + "/custom/info/uploadContract",
			headers: {
				Authorization: "Bearer " + getToken(),
			},

			uploadImgVis: false,
			viewImgVis: false,
			imageSrc: "",
			customId: "",
			uploadKey: "",
			popoverVis: false,
			hoverId: "",
			keyIsList: [
				{
					label: "是",
					value: 1,
				},
				{
					label: "否",
					value: 0,
				},
			],
			insideTaskVis: false,
			//内勤派单form
			insideTaskForm: {
				customId: null,
				contractId: null,
				handleContent: null,
				handleName: null,
			},
			taskListVis: false,
			taskList: [],
		};
	},
	created() {
		this.getList();
		this.listUser();
		this.getListGroup();
	},
	computed: {
		second() {
			return second;
		},
	},
	methods: {
		formatStatus(value) {
			if (value == "0") {
				return "未成交";
			}
			if (value == "1") {
				return "已成交";
			}
			if (value == "2") {
				return "注册中";
			}
			if (value == "3") {
				return "完毕";
			}
			if (value == "4") {
				return "废弃";
			}
			return "";
		},
		listUser() {
			listUser(this.addDateRange(this.queryEmp, this.dateRange)).then(
				(response) => {
					this.internalStaff = response.rows;
				}
			);
		},
		/** 查询客户信息列表 */
		getList() {
			this.loading = true;
			this.queryParams.pageNum = 1;
			listSalary(this.queryParams).then((response) => {
				this.infoList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},

		getListGroup() {
			this.loading = true;
			this.queryParams.pageNum = 1;
			listGroupSalary(this.queryParams).then((response) => {
				this.employees = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		nameChangeEvent({ row }) {
			let form = row;
			console.log(form);
			form.currentSalaryAmount = form.currentSalaryAmount - form.currentCost;
			console.log(form.currentCost);
			updateInfo(form).then((response) => {
				// this.getList();
				this.getListGroup();
			});
		},

		// 取消按钮
		cancel() {
			this.open = false;
		},
		// 取消按钮
		cancelContract() {
			this.openContract = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				customName: null,
				legalName: null,
				customNumber: null,
				legalPersonNumber: null,
				source: null,
				province: null,
				city: null,
				region: null,
				adressDetail: null,
				bussLicenseImage: null,
				bussLicenseImageMinor: null,
				legalIdCardFront: null,
				legalIdCardBack: null,
				callPhone: null,
				callName: null,
				customManager: null,
				gmtCreate: null,
				successTime: null,
				status: null,
			};
			this.resetForm("form");
		},
		talkBackHistory(row) {
			this.openRecord = true;
			let customId = row.id;
			let queryParams = {
				pageNum: 1,
				pageSize: 30,
			};
			if (customId) {
				queryParams.customId = customId;
			}
			console.log("customId", customId);
			listRemark(queryParams).then((response) => {
				this.remarkList = response.rows;
			});
		},
		createContract(row) {
			// this.form = {}
			// this.checkList = []
			// this.checkList1 = []
			// this.checkList2 = []
			// this.checkList3 = []
			// this.checkList4 = []
			this.openContract = true;
			this.rowId = row.id;
		},

		srcollFn(e) {
			let circulateNum = this.total / 30;
			if (this.queryParams.pageNum < circulateNum) {
				if (e.scrollTop + e.bodyHeight === e.scrollHeight) {
					this.loading = true;
					this.queryParams.pageNum++;
					const h = this.$createElement;

					listInfo(this.queryParams).then((response) => {
						this.infoList = [...this.infoList, ...response.rows];
						// this.total = response.total;
						this.loading = false;
					});
				}
			}
		},

		//上传图片等
		uploadTableImg(row, key) {
			this.uploadImgVis = true;
			this.uploadKey = key;
			this.customId = row.row.id;
			this.successAction();
		},

		//上传图片成功
		successAction() {
			this.getList();
			this.imageSrc = "";
			loadImage(this.customId, this.uploadKey).then((response) => {
				if (response.type === "image/jpg") {
					const blobData = {};
					blobData.type = "application/image;chartset=UTF-8";
					this.imageSrc = window.URL.createObjectURL(
						new Blob([response], blobData)
					);
				}
			});
		},

		//hover popover fc
		popoverFc(row, key) {
			this.uploadKey = key;
			this.customId = row.row.id;
			this.successAction();
		},
		formatKeyIs(value) {
			if (value === 1) {
				return "是";
			}
			if (value === 0) {
				return "否";
			}
		},
		//操作列 --暂停
		suspendBtn() { },
		cancelBtn() { },
		outsideTaskBtn(row) {
			console.log(row);
			let params = {
				customId: row.id,
				contractId: row.contractId,
				status: 3,
			};
			addTask(params).then((response) => {
				console.log(response);
				if (response.code === 200) {
				}
			});
		},
		//内勤派单
		insideTaskBtn(row) {
			console.log(row);
			this.insideTaskVis = true;
			this.insideTaskForm.customId = row.id;
			this.insideTaskForm.contractId = row.contractId;
			this.queryEmp.deptId = 105;
			this.listUser();
		},
		insideTaskFormConfirm() {
			let params = {
				customId: this.insideTaskForm.customId,
				contractId: this.insideTaskForm.contractId,
				handleContent: this.insideTaskForm.handleContent,
				handleName: this.insideTaskForm.handleName,
			};

			addInsideTask(params).then((response) => {
				console.log(response);
				if (response.code === 200) {
					this.insideTaskFormClose();
				}
			});
		},
		insideTaskFormClose() {
			this.insideTaskForm = {
				customId: null,
				contractId: null,
				handleContent: null,
				handleName: null,
			};
			this.insideTaskVis = false;
		},
		taskListBtn(row) {
			this.taskListVis = true;

			getTaskList(row.contractId).then((response) => {
				console.log(response);
				if (response.code === 200) {
					this.taskList = response.rows;
				}
			});
		},

		taskListClose() {
			this.taskListForm = {};
			this.taskListVis = false;
		},
	},
};
</script>

<style scoped>
.el-row {
	margin-bottom: 20px;
}

.newTree /deep/ .el-tree-node__content {
	height: 40px !important;
}

.newdialog .el-row {
	margin-bottom: 0px !important;
}

.width18 {
	width: 180px;
}
</style>